<template>
    <div class="readMore">
     <div class="title">
          <van-nav-bar
            title="咨询"
            left-arrow
            :fixed="fixd"
            @click-left="onClickLeft"
            />
     </div>
     <div class="content">
         <div class="tabbar">
             <div :class="act==1?'active':''" @click="tab('1')">
                 <span>时间</span>
                 <i class="iconfont iconbelow-s"></i>
             </div>
            <div :class="act==2?'active':''" @click="tab('2')">
                 <span>浏览</span>
                 <i class="iconfont iconbelow-s"></i>
             </div>
             <div :class="act==3?'active':''" @click="tab('3')">
                 <span>点赞</span>
                 <i class="iconfont iconbelow-s"></i>
             </div>
             <div :class="act==4?'active':''" @click="tab('4')">
                 <span>评论</span>
                 <i class="iconfont iconbelow-s"></i>
             </div>
             <div class="tabImg">
                 <img src="../assets/readMore/img2.png" alt="">
             </div>
        </div>   
        <!-- 正在热议 -->
        <div class="heated" v-if="hotList">
            <img src="../assets/readMore/img1.png" alt="">
            <span>正在热议</span>
        </div>
        <!-- 列表 -->
        <div class="list">
            <ul>
               <li v-for="(item,index) in  hotList" :key="index" @click="goAdvisoryDetails(item.consultId)">
                    <div class="left">
                        <!-- <img src="../assets/index/index20.png" alt=""> -->
                        <img :src="item.consultUrl" alt="">
                    </div>
                    <div class="right">
                        <h3>{{item.consultTitle}}</h3>
                        <p>{{item.consultSketch}}</p>
                        <div class="comment">
                           <div>
                               <i class="iconfont iconhuifu"></i>
                               <span>{{item.consultComment}}条</span>
                           </div>
                           <div>
                               <i class="iconfont iconyanjing1"></i>
                               <span>{{item.consultPageView}}</span>
                           </div>
                        </div>
                    </div>
                </li>

            </ul>
        </div>
         <!-- 咨询 -->
        <div class="heated">
            <img src="../assets/readMore/img3.png" alt="">
            <span>咨询</span>
        </div>
        <!-- 咨询列表 -->
          <div class="informationList">
            <ul>
                <li class="listData" v-if="dataList"  v-for="(item,index) in dataList" :key="index" 
                    @click="goAdvisoryDetails(item.consultId)"
                >
                    <div class="top">
                        <div class="left">
                            <h3>{{item.consultTitle}}...</h3>
                            <p  v-html="item.consultContent"></p>
                        </div>
                        <div class="right">
                            <img :src="item.consultUrl" alt="">        
                        </div>
                    </div>
                    <div class="bottom">
                        <div class="left_con">
                            <!-- <span>置顶</span>
                            <span>纵相新闻</span>
                            <span>3小时前</span> -->
                        </div> 
                        <div class="right_con">
                            <span>{{item.consultComment}}</span>
                            <span>讨论</span>
                        </div>   
                    </div>
                </li>
                <li v-else>
                    暂无咨询
                </li>
               
            </ul>
        </div>
       
     </div>


    </div>
</template>

<script>
import { NavBar } from 'vant';
import { Toast } from 'vant';
export default {
    data () {
        return {
            act:1,
            dataList:[],
            hotList:[],//热议咨询列表,
            userId:'',//用户id
            
        }
    },
    props:{
        fixd:{
            type:Boolean,
            value:true
        }
    },
    created (){
         this.userId = JSON.parse(localStorage.getItem("key")).userId;
        this.hotConsulting()
        this.getTimeSort();
       
       
    },
   methods: {
    onClickLeft() {
     this.$router.go(-1);
    },
    //tab切换
    tab(num) {
        this.act=num
        if(num==1){
            this.getTimeSort();
        }else if(num==2){
            this.getBrowserSort();
        }else if(num==3){
             this.getZanSort();
        }else if(num==4){
             this.getCommentSort();
        }
    },
    //去咨询详情页面
    goAdvisoryDetails (val) {
        this.$router.push({
            path:"/advisoryDetails",
            query:{
                id:val
            }
        })
    },
    //根据时间排序
    getTimeSort () {
        this.$axios.post("/cct/consult/orderByConsultTime",{}).then(res =>{
            console.log("根据时间排序",res);
             if(res.data.code==0){
                this.dataList= res.data.rows;
            }
        }) 
    },
    //根据浏览量排序
    getBrowserSort (){
         this.$axios.post("/cct/consult/updateConsultPageView",{
             consultId:this.userId
         }).then(res =>{
            console.log("根据浏览量排序",res)
        })
    },
    //根据点赞次数排序
    getZanSort (){
        this.$axios.post("/cct/consult/orderByConsultTags",{
             consultId:this.userId
        }).then(res =>{
            console.log("根据点赞排序",res);
            if(res.data.code==0){
                this.dataList =res.data.rows;
            }
        })
    },
     //根据评论量排序
    getCommentSort (){
        this.$axios.post("/cct/consult/orderByConsultComment",{}).then(res =>{
            console.log("根据评论量排序",res)
            if(res.data.code==0){
                this.dataList= res.data.rows;
            }
        })
    },
    //热议咨询
    hotConsulting (){
        this.$axios.post("/cct/consult/findHot",{
            consultUserid:this.userId
        }).then(res =>{
            console.log("热议咨询",res)
            if(res.data.code==0){
                this.hotList =res.data.data;
            }
        })
    }


  },
}
</script>

<style lang="less" scoped>
    .readMore{
        font-size: 0;
        width: 100%;
        position: relative;
        background-color: #f8f8f8;
        .title{
            width: 100%;
        }
        .content{
            width: 100%;
           .tabbar{
               display: flex;
               justify-content: space-between;
               padding: 0.2rem 0.3rem ;
               box-sizing: border-box;
               align-items: center;
               font-size: 0.28rem;
               color:#666666;
               background-color: #fff;
               div i{
                   font-size: 0.24rem;
               }
               .active{
                   color:#38A83F;
               }
               .tabImg {
                    img{
                       width: 0.4rem;
                       height: 0.3rem; 
                    }
               }
           } 
        //    正在热议
         .heated{
             padding: 0.2rem 0.3rem;
             box-sizing: border-box;
             color:#333;
             font-size: 0.28rem;
             background-color: #fff;
            

            img{
               width: 0.32rem;
               height: 0.36rem;
               vertical-align: -2px; 
               margin-right: 0.1rem;
                vertical-align: -4px;
            } 
         }
        //  列表
        .list{
            margin-top:0.2rem;
            box-sizing: border-box;
            li{
                margin-bottom: 0.2rem;
                display: flex;
                justify-content: space-between;
                // align-items: center;
                background-color: #fff;
                padding: 0.2rem 0.3rem;
                box-sizing: border-box;
                .left{
                    width: 1.47rem;
                    height: 1.47rem;
                    border-radius: 0.15rem;
                    overflow: hidden;
                    img{
                        width: 100%;
                        height: 100%;
                    } 
                } 
                .right{
                    width: 76%;
                    h3{
                         font-size: 0.28rem;
                         color:#333;
                         font-weight: bold;
                         margin-bottom: 0.15rem;
                    }
                    p{
                        font-size: 0.24rem;
                        color:#999999;
                    }
                    .comment{
                        display: flex;
                        justify-content: flex-start;
                        font-size: 0.22rem;
                        color:#B3B3B3;
                        div{
                            margin-top:0.2rem;
                            &:nth-child(1){
                                margin-right: 0.4rem;
                            }
                            i{
                                vertical-align: -2px;
                                margin-right: 0.06rem;
                            }
                        }
                    }
                }
            }
        }
         //咨询内容
    .informationList{
        width: 100%;
        ul{
            li{
               margin-bottom: 0.15rem; 
               background-color: #fff;
                padding: 0.2rem 0.3rem;
       box-sizing: border-box;
            }
            li.listData .top{
                display: flex;
                justify-content: space-between;
                .left{
                    width: 70%;
                    h3{
                        font-weight: bold;
                        font-size: 0.3rem;
                        color:#3C3C3C;
                    }
                    p{
                        font-size: 0.24rem;
                        color:#999;
                        line-height: 0.3rem;
                        margin-top:0.1rem;
                    }

                }   
                .right{
                    flex-shrink: 1;
                    width: 1.66rem;
                    height: 1.47rem; 
                    border-radius: 0.15rem;
                    overflow: hidden;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }   
                  
            }
            .bottom{
                font-size: 0.22rem; 
                display: flex;
                justify-content: space-between;
                padding: 0.1rem 0;
                box-sizing: border-box;
                margin-top:0.05rem;
                .left_con{
                    span{
                        display: inline-block;
                        padding: 0 0.1rem;
                        box-sizing: border-box;
                        &:nth-child(1){
                            border: 1px solid #DA1E0B;
                            border-radius: 0.1rem; 
                            padding:0.03rem 0.1rem;
                            font-size: 0.24rem;
                            color:#DA1E0B;

                        }
                        &:nth-child(2){
                           color:#B3B3B3;   
                        }
                         &:nth-child(3){
                           color:#B3B3B3;   
                        }
                    }
                }
                .right_con{
                    span{
                        display:inline-block;
                         padding: 0 0.1rem;
                         &:nth-child(1){
                             color:#DA1E0B;
                         }
                         &:nth-child(2){
                             color:#B3B3B3;
                         }
                    }
                }
            }
        }
    }
        }
    }
</style>


